<template>
  <div class="cart">
    <Vheader title="购物车"></Vheader>
    <div class="cart-wrapper" ref="cartWrapper">
      <div class="cart-container">
        <div class="nogoods" v-if="!goodslength">空空的</div>
        <section class="box" v-for="(item,index) in list" :index="index">
          <div class="operates">
              <span>

              </span>
            <span @click="edit(item)" v-show="!item.isShow">
                编辑
              </span>
            <span @click="edit(item)" v-show="item.isShow">
                完成
              </span>
          </div>
          <ul>
            <li class="check">
              <a title="" href="javascript:void 0"
                 v-bind:class="{checked:item.isChecked}"
                 @click="selectGood(item,index)">
              </a>
            </li>
            <li class="imgShow">
              <img :src="item.productInfo.images[0]" alt="">
            </li>
            <li class="con">
              <div class="title">
                <p>{{item.productInfo.productName}}</p>
              </div>
              <div class="attr" v-show="!item.isShow">
                <span v-for="attr in item.attributeNexuses">{{attr.name}}</span>
              </div>
              <div class="numBox" v-show="item.isShow">
                  <span>
                    <button @click="changeCount(item,-1,index)">-</button>
                    <input type="number" v-model="item.count">
                    <button @click="changeCount(item,1)">+</button>
                  </span>
              </div>
            </li>
            <li class="operate">
              <div class="price" v-if="item.nexusExtend">
                ￥{{item.nexusExtend.extendVal*item.count*item.productInfo.discount}}
              </div>
              <div class="price" v-if="!item.nexusExtend">
                ￥{{item.productInfo.price*item.count*item.productInfo.discount}}
              </div>
              <div class="del" @click="delGood(item,index)" v-show="item.isShow">
                <span class="iconfont icon-delete"></span>
              </div>
              <div class="num" v-show="!item.isShow">
                ×{{item.count}}
              </div>
            </li>
          </ul>
        </section>
      </div>
    </div>
    <div class="cartfoot" v-if="goodslength">
      <p class="cartfootl">
        <a :class="{checked:isSelectAll}" @click="selectAll"></a>
        全选
      </p>
      <p class="cartfootr">
          <span>
            合计：<b>￥{{allprice}}</b>
          </span>
        <button @click="buyNow()">立即购买</button>
      </p>
    </div>
  </div>
</template>

<script>
  import axios from '../../axios/axios'
  import Vheader from '../../components/header'
  import BScroll from 'better-scroll';

  export default {
    name: 'cart',
    data() {
      return {
        city: '杭州',
        weizhi: false,
        list: [],
        totalMoney: 0,
        isSelectAll: false,
        confirmDelete: false,
        readyToDelIndex: -1,
        allprice: 0,
        havacheck: false,
        goodslength:false,
      }
    },
    components: {
      Vheader,
    },
    mounted: function () {
      var that = this;
      var data = JSON.stringify({
        "actionName": "queryListPage",
        "controllerName": "userShop",
        "data": [{},
          1,
          10]
      });
      var token=localStorage.getItem('userToken');
      this.$root.tokenValidat(token,function (result) {
        if(result){
          axios.post({
            data: data,
            callback(res) {
              console.log(res.data);
              that.list = res.data.data;
              if(res.data.data.length>0){
                  that.goodslength=true;
                }else{
                  that.goodslength=false;
              }
              that.$nextTick(()=>{
                that._initScroll();
              })
            }
          });
        }else{
          that.$router.push('/login');
        }
      })
    },
    methods: {
      edit: function (good) {
        if (!good.isShow) {
          this.$set(good, "isShow", true);
          good.updata = '完成';
          this.updata = good.updata;
        } else {
          good.isShow = !good.isShow;
          good.updata = '编辑';
          this.updata = good.updata;
          // alert('完成')
          var data = JSON.stringify({
            "actionName": "insert",
            "controllerName": "userShop",
            "data": [{
              "count": good.count,
              "productId": good.productId,
            }
            ]
          });
          axios.post({
            data: data,
            callback(res) {
              if (res.data.data.result) {
              } else {
                alert(res.data.data.remark)
              }
            }
          });
        }
      },
      selectGood: function (goodObj, index) {
        if (!goodObj.isChecked) {
          this.$set(goodObj, "isChecked", true)
        } else {
          goodObj.isChecked = !goodObj.isChecked;
        }
        this.isCheckAll();
        this.totalPrice();
      },
      selectAll: function () {
        if (this.isSelectAll == false) {
          this.isSelectAll = true;
          this.list.forEach((good) => {
            good.isChecked = true;
            this.totalPrice();
          });
        } else {
          this.isSelectAll = false;
          this.list.forEach((good) => {
            good.isChecked = false;
            this.totalPrice();
          })
        }
      },
      changeCount: function (good, val, _index) {
        console.log(good.count, good.stock)
        if (good.count == 1 && val == -1) {
          this.confirmDelete = true;
          this.readyToDelIndex = _index;
        } else if (good.count >= good.stock && val == 1) {
          alert('库存不足')
        } else {
          good.count += val;
          this.totalPrice();
        }
      },
      isCheckAll: function () {
        var flag = true;
        this.list.forEach(function (good) {
          if (!good.isChecked) {
            flag = false;
          }
        });
        if (!flag) {
          this.isSelectAll = false;
        } else {
          this.isSelectAll = true;
        }
      },
      totalPrice: function () {
        var total = 0;
        this.list.forEach(function (good) {
          if (good.isChecked) {
            if (good.nexusExtend) {
              total += good.nexusExtend.extendVal * good.count * good.productInfo.discount;
            } else {
              total += good.productInfo.price * good.count * good.productInfo.discount;
            }

          }
        });
        this.allprice = total;
      },
      delGood: function (good, _index) {
        console.log(_index)
        var index = document.querySelectorAll("section[index='" + _index + "']");
        index[0].remove()
        console.log(good.shopId)
        var data = JSON.stringify({
          "actionName": "delete",
          "controllerName": "userShop",
          "data": [good.shopId]
        });
        axios.post({
          data: data,
          callback(res) {
            console.log(res.data)
          }
        });
      },
      buyNow: function () {
        var that = this;
        sessionStorage.clear();
        that.list.forEach(function (good) {
          if (good.isChecked) {
            that.havacheck = true;
            sessionStorage.setItem('goods' + good.productId, JSON.stringify(good));
          }
        });
        if (that.havacheck) {
          that.$router.push('/confirmOrder');
        } else {
          alert("请选择商品!")
        }

      },
      _initScroll:function () {
        this.scroll=new BScroll(this.$refs.cartWrapper,{click:true})
      }
    },
    computed: {
      // totalPrice:function(){
      //   var total = 0;
      //   this.list.forEach(function(good){
      //     if(good.isChecked){
      //       total += good.productInfo.price * good.count;
      //     }
      //   });
      //   return total;
      // },
    },
  }
</script>
<style type="text/scss" lang="scss" scoped>
  @import "../../common/style/public";

  .cart {
    width: 100%;
    .cart-wrapper {
      width: 100%;
      height: calc(100% - 139px);
      position: absolute;
      top:44px;
      overflow: hidden;
      .cart-container{
        width:100%;
        padding-top: 5px;
        .nogoods{
          height: 36vh;
          line-height: 36vh;
          text-align: center;
        }
        .box {
          .operates {
            background-color: #fff;
            height: 8vw;
            border-top: 1px solid #f5f5f5;
            padding: 1vw 6vw;
            display: flex;
            justify-content: space-between;
            span {
              display: inline-block;
              height: 8vw;
              line-height: 8vw;
            }
          }
          ul {
            display: flex;
            justify-content: space-around;
            height: 24vw;
            margin-top: 1px;
            margin-bottom: 5px;
            background-color: #fff;
            padding: 10px 0;
            .check {
              position: relative;
              width: 12vw;
              a {
                display: inline-block;
                width: 6vw;
                height: 6vw;
                border-radius: 50%;
                border: 1px solid #e5e5e5;
                position: absolute;
                left: 2vw;
                top:9vw;
                /*<!--left: 50%;-->*/
                /*<!--margin-left: -3vw;-->*/
                /*<!--top: 50%;-->*/
                /*<!--margin-top: -2vw;-->*/
              }
              .checked {
                background-image: url("../../common/img/check.png");
                background-size: 100% 100%;
              }
            }
            .imgShow {
              width: 24vw;
              padding: 5px;
              border: 1px solid #dddddd;
              border-radius: 6px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .con {
              width: 48vw;
              background-color: #fff;
              padding: 0 2vw;
              .title {
                height: 40%;
                margin-top: 10px;
                p {
                  font-size: 12px;
                  width: 100%;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                }
              }
              .attr {
                margin-top: 10px;
                height: 20%;
                font-size: 12px;
                span {
                  font-size: 10px;
                  color: gray;
                  margin-left: 6px;
                }
              }
              .numBox {
                height: 40%;
                span {
                  width: 80%;
                  height: 70%;
                  margin-top: 14px;
                  border-radius: 6px;
                  display: flex;
                  justify-content: space-around;
                  button {
                    width: 30%;
                    background-color: #fff;
                    border: 1px solid #ccc;
                    outline: none;
                  }
                  input {
                    width: 40%;
                    /*border: 1px solid #ccc;*/
                    border-top: 1px solid #ccc;
                    border-bottom: 1px solid #ccc;
                    text-align: center;
                  }
                }
              }
            }
            .operate {
              width: 16vw;
              .price {
                height: 50%;
                text-align: center;
                line-height: 12vw;
              }
              .del {
                height: 50%;
                text-align: center;
                line-height: 12vw;
                span {
                  font-size: 20px;
                }
              }
              .num {
                text-align: center;
                line-height: 12vw;
              }
            }
          }
        }
      }
    }
    .cartfoot {
      background-color: #fff;
      width: 100%;
      display: flex;
      justify-content: space-between;
      position: fixed;
      left: 0;
      bottom: 50px;
      height: 45px;
      line-height: 45px;
      border-top: solid 1px #e5e5e5;
      .cartfootl {
        /*line-height: 54px;*/
        position: relative;
        width: 10vw;
        padding: 0 12vw;
        a {
          display: inline-block;
          width: 6vw;
          height: 6vw;
          border-radius: 50%;
          border: 1px solid #e5e5e5;
          position: absolute;
          left: 10%;
          top: calc((44px - 6vw) / 2);
        }
        .checked {
          background-image: url("../../common/img/check.png");
          background-size: 100% 100%;
        }
      }
      .cartfootr {
        span {
          padding: 0 2vw;
          font-size: 16px;
          b {
            color: red;
          }
        }
        button {
          height: 100%;
          background: linear-gradient(to right,#f06a22, #f04022);
          padding: 0 6vw;
          font-size: 16px;
          color: #fff;
          border: none;
        }
      }
    }

  }
</style>







